<template>
  <div>
<!--    面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
<!--    卡片视图-->
    <el-card class="box-card">
<!--      添加分类按钮-->
      <el-row>
        <el-col>
          <el-button type="primary" @click="showAddCategory">添加分类</el-button>
        </el-col>
      </el-row>
<!--      树形分类表格-->
      <tree-table class="treeTable"
                  :data="categoryList"
                  :columns="columns"
                  :expand-type="false"
                  :show-index="true"
                  index-text="#"
                  :show-row-hover="false"
                  border
                  :selection-type="false" >
<!--        是否有效-->
        <template slot="isok" slot-scope="scope">
          <i class="el-icon-success"
             v-if="scope.row.cat_deleted === false"
             style="color:lightgreen"></i>

          <i class="el-icon-error"
             style="color:red"
             v-else></i>
        </template>

<!--        排序-->
        <template slot="order" slot-scope="scope">
<!--          一级分类-->
          <el-tag type="primary"
                  size="mini"
                  v-if="scope.row.cat_level === 0">
            一级
          </el-tag>
<!--          二级分类-->
          <el-tag type="success"
                  size="mini"
                  v-else-if="scope.row.cat_level === 1">
            二级
          </el-tag>
<!--          三级分类-->
          <el-tag type="warning"
                  size="mini"
                  v-else>
            三级
          </el-tag>
        </template>

        <!--          操作-->
        <template slot="option" slot-scope="scope">
          <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditCategoryDialog(scope.row)">
            编辑
          </el-button>
          <el-button type="danger"
                     icon="el-icon-delete"
                     size="mini"
                     @click="removeCategoryById(scope.row.cat_id)">
            删除
          </el-button>
        </template>
      </tree-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[3,5,10,15]"
          :page-size="queryInfo.pagesize"
          layout="total,sizes,prev,pager,next,jumper"
          :total="total">
      </el-pagination>
    </el-card>
<!--    添加分类对话框-->
    <el-dialog
        title="添加分类"
        width="50%"
        :visible.sync="addCategoryDialogVisible"
        @close="addCategoryDialogClosed">
<!--      添加分类表单-->
      <el-form :model="addCategoryForm"
               :rules="addCategoryFormRules"
               label-width="100px"
               ref="addCategoryFormRef">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addCategoryForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类" >
          <!--              options用于指定数据源-->
          <!--          props用于指定配置对象-->
          <el-cascader
              v-model="selectedKeys"
              :options="parentCategoryList"
              :props="{ expandTrigger: 'hover' ,...cascaderProps,checkStrictly:true}"
              @change="parentCategoryChanged"
              clearable>
          </el-cascader>
        </el-form-item>
      </el-form>
       <span slot="footer" class="dialog-footer">
            <el-button @click="addCategoryDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCategory">确 定</el-button>
      </span>
    </el-dialog>

<!--    编辑分类对话框-->
    <el-dialog
        title="编辑分类"
        width="50%"
        :visible.sync="editCategoryDialogVisible">
      <el-form :model="editCategoryForm"
               label-width="100px"
               :rules="editCategoryFormRules"
               ref="editCategoryFormRef">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="editCategoryForm.cat_name">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="editCategoryDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editCategory">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Category",
  data(){
    return{
      // 分类列表
      categoryList:[],
      //请求参数
      queryInfo:{
        type:3,
        // 当前页码值
        pagenum: 1,
        // 每页显示的数据条数
        pagesize:5,
      },
      // 总数据条数
      total:0,
      //树形列表的列配置
      columns:[
        {
          label:"分类名称",
          prop:"cat_name"
        },
        {
          label:"是否有效",
          // 是否定义为模板列
          type:"template",
          // 模板名称
          template:"isok"
        },
        {
          label: "排序",
          type: "template",
          template: "order"
        },
        {
          label: "操作",
          type: "template",
          template: "option"
        },
      ],
      // 控制添加分类对话框显示与隐藏
      addCategoryDialogVisible:false,
      // 添加分类表单数据对象
      addCategoryForm:{
        // 分类名称
        cat_name:"",
        // 父级分类的id
        cat_pid:0,
        //分类级别
        cat_level:0
      },
      // 添加分类表单校验规则
      addCategoryFormRules:{
        cat_name:[
          {required:true,message:"请输入分类名称",trigger:"blur"}
        ]
      },
      // 父级分类列表
      parentCategoryList:[],
      // 级联选择器的配置对象
      cascaderProps:{
        value:"cat_id",
        label:"cat_name",
        children:"children"
      },
      //选择的父级分类的id数组
      selectedKeys:[],
      //控制编辑分类对话框的显示与隐藏
      editCategoryDialogVisible:false,
      //编辑分类表单
      editCategoryForm:{
        cat_name:""
      },
      // 编辑分类表单的验证规则
      editCategoryFormRules:{
        cat_name:[
          {required:true,message:"请输入分类名称",trigger:"blur"}
        ]
      },
      //需要编辑的分类的id
      categoryId:0
    }

  },
  methods:{
    // 获取分类表格
   async getCategoryList(){
      const {data:res} = await this.$http.get("categories",{params:this.queryInfo})
      if(res.meta.status !== 200) return this.$message.error("获取分类列表失败")
      this.categoryList = res.data.result
     this.total = res.data.total
    },
    // 监听pagesize改变
    handleSizeChange(newSize){
     this.queryInfo.pagesize = newSize
      this.getCategoryList()
    },
    // 监听pagenum改变
    handleCurrentChange(newPage){
     this.queryInfo.pagenum = newPage
      this.getCategoryList()
    },
    //点击按钮显示添加分类的对话框
    showAddCategory(){
     // 先获取父级分类的列表
     this.getParentCategoryList()
     this.addCategoryDialogVisible = true
    },
    //获取父级分类的数据列表
   async getParentCategoryList(){
     const {data:res} = await this.$http.get("categories",{params:{type:2}})
     if(res.meta.status !== 200) return this.$message.error("获取父级分类列表失败")
     this.parentCategoryList = res.data
    },
    // 监听级联选择器中选择项发生改变
    parentCategoryChanged(){
      if(this.selectedKeys.length > 0){
        // 父级的id永远是selectedkeys的最后一项
        this.addCategoryForm.cat_pid = this.selectedKeys[this.selectedKeys.length-1]
        // 等级永远是selectedKeys的长度
        this.addCategoryForm.cat_level = this.selectedKeys.length
        return
      }else{
        this.addCategoryForm.cat_pid = 0
        this.addCategoryForm.cat_level = 0
      }
    },
    // 监听对话框的关闭，重置表单数据
    addCategoryDialogClosed(){
     this.$refs.addCategoryFormRef.resetFields()
      this.selectedKeys = []
      this.addCategoryForm.cat_pid = 0
      this.addCategoryForm.cat_level = 0
    },
    // 点击添加新的分类
    addCategory(){
     this.$refs.addCategoryFormRef.validate(async valid=>{
       if(!valid){
         return false
       }
     const {data:res} = await this.$http.post("categories",this.addCategoryForm)
       if(res.meta.status !== 201){
         return this.$message.error("添加分类失败")
       }
       this.$message.success("添加分类成功")
       this.getCategoryList()
       this.addCategoryDialogVisible = false
     })
    },
    // 显示编辑分类的对话框
    showEditCategoryDialog(categoryItem){
      this.editCategoryForm.cat_name = categoryItem.cat_name
      this.categoryId = categoryItem.cat_id
      this.editCategoryDialogVisible = true
    },
    // 修改分类
    editCategory(){
     this.$refs.editCategoryFormRef.validate(async (valid)=>{
       if(!valid){
         return false
       }
       const {data:res} = await this.$http.put(`categories/${this.categoryId}`,this.editCategoryForm)
       if(res.meta.status !== 200){
         return this.$message.error("修改分类错误")
       }
       this.$message.success("修改分类成功")
       this.getCategoryList()
       this.editCategoryDialogVisible = false
     })
    },
    //通过id删除分类
    async removeCategoryById(id){
    const confirmResult = await this.$confirm("此操作将永久删除该分类，是否继续？","提示",{
       confirmButtonText:"确定",
       cancelButtonText:"取消",
       type:"warning"
     }).catch(err=>err)
      if(confirmResult == "cancel"){
        return this.$message.info("已取消删除")
      }else{
        const {data:res} = await this.$http.delete(`categories/${id}`)
        if(res.meta.status !== 200){
          return this.$message.error("删除分类失败")
        }
        this.$message.success("删除分类成功")
        this.getCategoryList()
      }
    }
  },

  mounted() {
    this.getCategoryList()
  }
}
</script>

<style scoped>
.treeTable{
  margin-top: 15px;
}
.el-cascader{
  width: 100%;
}

</style>